{% extends "layout.html" %}

{% block extra_css %}
    <!-- LightBox -->
    <link href="{{ url_for('static', filename='css/lightbox.min.css') }}" rel="stylesheet">
{% endblock %}

{% block content %}
    <div class="container">
        <h2>about me!</h2>
        <div class="row text-center">
            <div class="col-xs-6 col-md-3">
                <a href="{{ url_for('static', filename='img/cat.jpg') }}" data-lightbox="img-set" data-title="Big Image">
                    <img class="img-thumbnail" src="{{ url_for('static', filename='img/cat.jpg') }}">
                </a>
                <div class="caption">
                    <h3>Thumbnail label</h3>
                    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
                    <p>
                        <a href="#" class="btn btn-primary" role="button">Button</a>
                        <a href="#" class="btn btn-default" role="button">Button</a>
                    </p>
                </div>
            </div>
            <div class="col-xs-6 col-md-3">
                <a href="{{ url_for('static', filename='img/cat.jpg') }}" data-lightbox="img-set" data-title="Big Image">
                    <img class="img-thumbnail" src="{{ url_for('static', filename='img/cat.jpg') }}">
                </a>
                <div class="caption">
                    <h3>Thumbnail label</h3>
                    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
                    <p>
                        <a href="#" class="btn btn-primary" role="button">Button</a>
                        <a href="#" class="btn btn-default" role="button">Button</a>
                    </p>
                </div>
            </div>
            <div class="col-xs-6 col-md-3">
                <a href="{{ url_for('static', filename='img/cat.jpg') }}" data-lightbox="img-set" data-title="Big Image">
                    <img class="img-thumbnail" src="{{ url_for('static', filename='img/cat.jpg') }}">
                </a>
                <div class="caption">
                    <h3>Thumbnail label</h3>
                    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
                    <p>
                        <a href="#" class="btn btn-primary" role="button">Button</a>
                        <a href="#" class="btn btn-default" role="button">Button</a>
                    </p>
                </div>
            </div>
            <div class="col-xs-6 col-md-3">
                <a href="{{ url_for('static', filename='img/cat.jpg') }}" data-lightbox="img-set" data-title="Big Image">
                    <img class="img-thumbnail" src="{{ url_for('static', filename='img/cat.jpg') }}">
                </a>
                <div class="caption">
                    <h3>Thumbnail label</h3>
                    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
                    <p>
                        <a href="#" class="btn btn-primary" role="button">Button</a>
                        <a href="#" class="btn btn-default" role="button">Button</a>
                    </p>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block extra_js %}
    <!-- LightBox -->
    <script src="{{ url_for('static', filename='plugin/Lightbox/lightbox.min.js') }}"></script>
    <script>
        lightbox.option({
            'alwaysShowNavOnTouchDevices': true,
            'albumLabel': "Image %1 of %2",
            'resizeDuration': 200,
            'wrapAround': true
        })
    </script>
{% endblock %}
